<template>
	<view>
		<view class="bg-white d-flex seach j-center a-center py-2">
			<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
				<u-icon name="search" color="#888888" size="33" class="mx-2"></u-icon>
				<input type="text" confirm-type="search" @confirm="seach" :focus="firstFocus" placeholder="搜索商品名称" v-model="keywords" @input="seachInput" />
			</view>
		</view>
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view v-if="saleList.length==0" class="d-flex flex-column j-center a-center h_100 pb-3">
				<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
				<view class="">暂无商品</view>
			</view>	
		<!-- 在售商品 -->
			<view class="wrap deep" v-else>
				<view class="">
					<view  class="goods_card bg-white m-2 p-3 rounded-20" v-for="(item,index) in saleList" :key="index">
						<view class="goods_card_head d-flex"  @click="goodsEdit(item)">
							<view class="goods_card_head_left position-relative ">
								<view v-if="item.has_product=='yes'" class="text-white goods_logo">多货品</view>
								<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
							</view>
							<view class="goods_card_head_right pl-3">
								<view class="d-flex">
									<view class="ellipsis pro_name">
										<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
										<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
										<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
										<image v-if="item.is_promote" src="../../static/images/goods/promotion.png" class="mr" mode=""></image>
										{{item.name}}
									</view>
								</view>
								<view class="text-light-muted font-md my pt-2">
									<text class="mr-3">库存：{{item.stock}}</text>
									<text>销量：{{item.sales_volume}}</text>
								</view>
								<view class="mt-1 pt">
									<text class="text-danger mr-2 font-35">{{item.shop_price}}</text><text class="font-md text-light-muted tex line-through">{{item.market_price}}</text>
								</view>
							</view>
						</view>
					</view>	
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				arr:[],
				seach_flag:false,
				keywords:"", // 关键字
				saleList:[], // 在售商品
				goods_id:"", // 还原商品ID
				firstFocus:true,
				scrollHeight:0,// 屏幕高度
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onLoad(e) {
			this.$H.post("admin/user/userinfo").then(res=>{
				if(res.data.is_merchant){
					this.$H.post("admin/merchant/goods/search",{merchant_category_id:e.cat_id}).then(res=>{
						this.saleList=res.data
					})
				}else{
					this.$H.post("admin/merchant/goods/search",{category_id:e.cat_id}).then(res=>{
						this.saleList=res.data
					})
				}
			})
		},
		methods: {
			// 监听input框
			seachInput(e){
				this.keywords=e.detail.value
			},
			// 搜索
			seach(){
				if(this.keywords.length!=0){
					let arr=this.saleList.find(v=>{
						if(v.name.includes(this.keywords)){
							return v
						}
					})
					uni.showLoading({
						title:'加载中',
						success: () => {
							if(arr){
								this.saleList=[arr]
							}else{
								this.saleList=[]
							}
							uni.hideLoading()
						}
					})
				}else{
					this.arr=""
				}
			},
			// 详情
			goodsEdit(item){
				uni.navigateTo({
					url:"/pages/goods-edit/goods-edit?goods_id="+item.goods_id
				})
			},
		}
	}
</script>

<style>
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	.restore{
		border-radius: 40upx;
		border: 1px solid #555;
	}
	/* 售罄商品 */
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left{
	}
	.goods_card_head_left image{
		width: 180upx;
		height: 180upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		padding: 8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.popupImg{
		width: 170upx;
		height: 170upx;
	}
	.deep /deep/ button{
		width: 70%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.icon_no_data{
		width: 250upx;
		height: 250upx;
	}
	
	.goods_logo{
		font-size: 25upx;
		padding: 7upx 10upx;
		border-radius: 10upx 20upx 20upx 0;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(242,79,45,0.8);
		z-index: 11;
	}
</style>
